<template>
  <div>
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form
        ref="form"
        label-width="80px"
        :model="companysInfo"
        :inline="true"
      >
        <el-row type="flex" justify="end">
          <!-- 标签名称 -->
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input
                placeholder="请输入"
                v-model="companysInfo.tags"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @change="changeProvince"
                v-model="companysInfo.province"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 地区 -->
          <el-col :span="6">
            <el-form-item label="地区">
              <el-select v-model="companysInfo.city" placeholder="请选择">
                <el-option
                  v-for="item in regionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                placeholder="请输入"
                v-model="companysInfo.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="companysInfo.state" placeholder="请选择">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-button @click="onClear">清除</el-button>
            <el-button type="primary" class="search-btn" @click="onSearch"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="1" :offset="8" class="add-user">
            <el-button type="success" @click="onAdd">新增用户</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 信息数量 -->
      <el-alert type="info" show-icon :closable="false">
        <template> 共{{ total }}条记录 </template>
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        highlight-current-row
      >
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="number" label="企业编号" width="220" />
        <el-table-column prop="shortName" label="企业简称" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="province" label="创建者" />
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <div>
              {{ scope.row.addDate | formatTimeXxh }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="220" />
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.state === 0 ? '禁用' : '启用' }}
              {{ scope.row.state }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              plain
              type="primary"
              icon="el-icon-edit"
              circle
              @click="onEdit(scope.row)"
            ></el-button>
            <!-- 勾勾 -->
            <el-tooltip
              v-if="scope.row.state === 0"
              class="item"
              effect="dark"
              content="点击启用"
              placement="top"
            >
              <el-button
                @click="enable(scope.row)"
                plain
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
            </el-tooltip>
            <!-- 叉叉 -->
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              content="点击禁用"
              placement="top"
            >
              <el-button
                @click="forbidden(scope.row)"
                ton
                plain
                type="warning"
                icon="el-icon-close"
                circle
              ></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-button
              plain
              v-if="scope.row.id !== 2"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="onDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="companysInfo.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="companysInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        :total="total"
      >
      </el-pagination>

      <!-- 新增用户 编辑用户 弹层 -->
      <companys-add
        :titleInfo="titleInfo"
        :formBase="formBase"
        :dialogFormVisible="dialogFormVisible"
        @on-close="onClose"
        @load-companys-list="loadCompanysList"
      />
    </el-card>
  </div>
</template>

<script>
import { list, disabled, remove } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import companysAdd from '../components/companys-add.vue'
export default {
  components: { companysAdd },
  data () {
    return {
      // 弹层数据
      titleInfo: {
        // 标题
        text: '',
        pageTitle: '用户'
      },
      formBase: {
        shortName: '',
        isFamous: null,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      dialogFormVisible: false, // 控制弹层
      // 获取用户列表的参数 表格
      companysInfo: {
        tags: null,
        province: null, // 城市
        city: null, // 地区
        shortName: null, // 企业简称
        state: null, // 状态
        page: 1, // 当前的页数
        pagesize: 10 // 每页数量
      },
      // 城市选择器
      cityList: [],
      // 地区选择器
      regionList: [],
      // 状态选择器
      stateList: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      // 表格数据
      tableData: [],
      total: 1 // 列表数据总数
    }
  },

  created () {
    this.loadCompanysList()
    this.loadProvinces()
  },

  methods: {
    // 加载城市
    loadProvinces () {
      // console.log(arr, 567)
      const arr = provinces().map((item, index) => {
        return {
          value: '选项' + (index + 1),
          label: item
        }
      })
      this.cityList = arr
    },
    // 选中城市时,加载地区
    changeProvince () {
      // console.log(this.companysInfo.province)
      const arr = citys(this.companysInfo.province).map((item, index) => {
        return {
          value: '选项' + (index + 1),
          label: item
        }
      })
      // console.log(arr, 123)
      this.regionList = arr
      // console.log(arr[0])
      this.companysInfo.city = arr[0].label
    },
    // 加载企业列表
    async loadCompanysList () {
      try {
        const res = await list(this.companysInfo)
        // console.log(res)
        this.tableData = res.data.items // 接收表格数据
        this.total = res.data.counts // 得到数据总数
      } catch (err) {
        this.$message.error('系统繁忙')
      }
    },
    // 点击清除
    onClear () {
      // console.log(1111)
      this.companysInfo.tags = null
      this.companysInfo.province = null
      this.companysInfo.city = null
      this.companysInfo.shortName = null
      this.companysInfo.state = null
      this.loadCompanysList()
    },
    // 点击搜索
    onSearch () {
      // console.log(7777)
      this.loadCompanysList()
    },
    // 点击新增用户
    onAdd () {
      this.titleInfo.text = '创建'
      this.dialogFormVisible = true
    },
    // 点击编辑
    onEdit (row) {
      this.titleInfo.text = '编辑'
      this.dialogFormVisible = true
      console.log(row, 987654)
      this.formBase = {
        shortName: row.shortName,
        company: row.company,
        province: row.province,
        city: row.city,
        tags: row.tags,
        remarks: row.remarks,
        id: row.id,
        addDate: row.addDate,
        creatorID: row.creatorID,
        number: row.number,
        state: row.state
      }
      if (row.isFamous === 1) {
        this.formBase.isFamous = true
      } else {
        this.formBase.isFamous = false
      }
    },
    // 点击删除
    onDelete (row) {
      this.$confirm('即将执行永久删除操作，是否确定？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove({ id: row.id })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.loadCompanysList() // 删除成功 重新加载页面
          } catch (err) {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 选择的每一页的数量size
    handleSizeChange (newSize) {
      // console.log(`每页 ${newSize} 条`)
      this.companysInfo.pagesize = newSize
      this.loadCompanysList()
    },
    // 选择切换当前页page
    handleCurrentChange (newPage) {
      // console.log(`当前页: ${newPage}`)
      this.companysInfo.page = newPage
      this.loadCompanysList()
    },
    // 关闭弹层
    onClose () {
      this.dialogFormVisible = false
      this.formBase = {
        // 清空表单数据
        shortName: '',
        isFamous: true,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
    },
    // 点击勾勾
    enable (row) {
      this.$confirm('该操作会将状态改为启用，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await disabled({ id: row.id, state: 1 })
            this.$message({
              type: 'success',
              message: '修改状态成功!'
            })
            this.loadCompanysList() // 删除成功 重新加载表格列表
          } catch (err) {
            this.$message({
              type: 'error',
              message: '修改状态失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击叉叉
    forbidden (row) {
      this.$confirm('该操作会将状态改为禁用，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await disabled({ id: row.id, state: 0 })
            this.$message({
              type: 'success',
              message: '修改状态成功!'
            })
            this.loadCompanysList() // 删除成功 重新加载表格列表
          } catch (err) {
            this.$message({
              type: 'error',
              message: '修改状态失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px 20px;
}
.el-alert {
  margin: 20px 0;
}
/deep/.el-alert__icon.is-big {
  font-size: 16px !important;
}
/deep/.el-alert .el-alert__description {
  margin: 0 !important;
  font-size: 13px !important;
}
/deep/.cell {
  text-align: center !important;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
